<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>天气</title>
  <script src="https://unpkg.com/feather-icons"></script><link rel="stylesheet" href="./style.css">

</head>
<body background="./001.webp">
<!-- partial:index.partial.html -->
<style>
  .hidden {
    display: none;
  }
</style>
<div class="container">
  <div class="weather-side">
    <div class="weather-gradient"></div>
    <div class="date-container">
      <h2 class="date-dayname" id="weeks"></h2><span class="date-day" id="date"></span><i class="location-icon" data-feather="map-pin"></i><span class="location" id="city"></span>
    </div>
    <div class="weather-container">
      
      <div id="weather_day_sun" class="hidden">
      <i class="weather-icon" data-feather="sun"></i>
      </div>
      <div id="weather_day_cloud" class="hidden">
        <i class="weather-icon" data-feather="cloud"></i>
      </div>
      <div id="weather_day_snow" class="hidden">
        <i class="weather-icon" data-feather="cloud-snow"></i>
      </div>
      <div id="weather_day_rain" class="hidden">
        <i class="weather-icon" data-feather="cloud-rain"></i>
      </div>

      <h1 class="weather-temp" id="temperature"></h1>
      <h3 class="weather-desc" id="weather"></h3>
    </div>
  </div>
  <div class="info-side">
    <div class="today-info-container">
      <div class="today-info">
        <div class="precipitation"> <span class="title">PRECIPITATION</span><span class="value">0 %</span>
          <div class="clear"></div>
        </div>
        <div class="humidity"> <span class="title">WIND DIRECTION</span><span class="value" id="wind"></span>
          <div class="clear"></div>
        </div>
        <div class="wind"> <span class="title">WIND</span><span class="value" id="windpower"></span>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="week-container">
      <ul class="week-list">
        <li class="active">
          <div id="weather_day0_sun" class="hidden">
            <i class="day-icon" data-feather="sun"></i>
            </div>
            <div id="weather_day0_cloud" class="hidden">
              <i class="day-icon" data-feather="cloud"></i>
            </div>
            <div id="weather_day0_snow" class="hidden">
              <i class="day-icon" data-feather="cloud-snow"></i>
            </div>
            <div id="weather_day0_rain" class="hidden">
              <i class="day-icon" data-feather="cloud-rain"></i>
            </div>
        <span class="day-name" id="week"></span><span class="day-temp" id="temperature0"></span></li>
        <li>
          
          <div id="weather_day1_sun" class="hidden">
            <i class="day-icon" data-feather="sun"></i>
            </div>
            <div id="weather_day1_cloud" class="hidden">
              <i class="day-icon" data-feather="cloud"></i>
            </div>
            <div id="weather_day1_snow" class="hidden">
              <i class="day-icon" data-feather="cloud-snow"></i>
            </div>
            <div id="weather_day1_rain" class="hidden">
              <i class="day-icon" data-feather="cloud-rain"></i>
            </div>
          
          <span class="day-name" id="week1"></span><span class="day-temp" id="temperature1"></span></li>
        <li>

          <div id="weather_day2_sun" class="hidden">
            <i class="day-icon" data-feather="sun"></i>
            </div>
            <div id="weather_day2_cloud" class="hidden">
              <i class="day-icon" data-feather="cloud"></i>
            </div>
            <div id="weather_day2_snow" class="hidden">
              <i class="day-icon" data-feather="cloud-snow"></i>
            </div>
            <div id="weather_day2_rain" class="hidden">
              <i class="day-icon" data-feather="cloud-rain"></i>
            </div>

          <span class="day-name" id="week2"></span><span class="day-temp" id="temperature2"></span></li>
        <li>
          
          <div id="weather_day3_sun" class="hidden">
            <i class="day-icon" data-feather="sun"></i>
            </div>
            <div id="weather_day3_cloud" class="hidden">
              <i class="day-icon" data-feather="cloud"></i>
            </div>
            <div id="weather_day3_snow" class="hidden">
              <i class="day-icon" data-feather="cloud-snow"></i>
            </div>
            <div id="weather_day3_rain" class="hidden">
              <i class="day-icon" data-feather="cloud-rain"></i>
            </div>
          
          <span class="day-name" id="week3"></span><span class="day-temp" id="temperature3"></span></li>
        <div class="clear"></div>
      </ul>
    </div>
    <div class="location-container">
      <button class="location-button"><a href="http://xatu.bolgk.eu.org/1.html"> <i data-feather="map-pin"></i><span>home</span></a></button>
    </div>
  </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>
